<template>
  <div>
    <div id="navbar">
      <div class="lww_header">
        <div class="header_wrap">
          <div class="header_logo">
            <a href="javascript:void(0);" class="lww_logo"></a>
          </div>
          <ul class="header_nav">
            <li name="index" :class="{'header_nav_active':$route.path==='/'}" @click="homeFn">
              <a>首页</a>
            </li>
            <li name="destination" :class="{'header_nav_active':$route.path==='/destination'}" @click="DesFn"><a>目的地</a></li>
            <li name="strategy" :class="{'header_nav_active':$route.path==='/strategy'}" @click="strategyFn">
              <a>旅游攻略</a>
            </li>
            <li name="travel"><a>旅游日记</a></li>
            <li name="">
              <a href="javascript:void(0);"
                >去旅行<i class="icon_caret_down"></i
              ></a>
            </li>
            <li name="">
              <a href="javascript:void(0);"
                >社区<i class="icon_caret_down"></i
              ></a>
            </li>
          </ul>
          <div class="header_search">
            <input type="text" />
            <a class="icon_search"></a>
          </div>
          <!-- 登录成功后的头像 -->
          <!-- <div class="login_info" v-show="isLogined"> -->
          <div class="login_info" style="display: block" v-show="isLogined">
            <div class="head_user">
              <a>
                <img
                  src="@/assets/images/default.jpg"
                  id="login_user_headUrl"
                />
                <i class="icon_caret_down"></i>
                <span style="margin-left: 10px" @click="loginOutFn"
                  >退出登录</span
                >
              </a>
            </div>
            <div class="header_msg">消息<i class="icon_caret_down"></i></div>
            <div class="header_daka">
              <a href="javascript:void(0);">打卡</a>
            </div>
          </div>
          <div class="login-out" v-show="!isLogined">
            <a
              class="weibo-login"
              href="./login.html"
              title="微博登录"
              rel="nofollow"
            ></a>
            <a
              class="qq-login"
              href="./login.html"
              title="QQ登录"
              rel="nofollow"
            ></a>
            <a
              class="weixin-login"
              href="./login.html"
              title="微信登录"
              rel="nofollow"
            ></a>
            <a id="_j_showlogin" @click="$router.push('/login')">登录</a>
            <!-- <span id="_j_showlogin" title="登录骡窝窝" href="./login.html" rel="nofollow">登录</span> -->
            <span class="split">|</span>
            <a href="./regist.html" title="注册帐号" rel="nofollow">注册</a>
          </div>
        </div>
        <div class="shadow"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  created() {
    let token = localStorage.getItem("token");
    if (!!token) {
      this.changeIsLogined(true);
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      isLogined: (state) => state.Loginstatus.isLogined,
    }),
  },
  methods: {
    ...mapMutations({
      changeIsLogined: "Loginstatus/changeIsLogined",
    }),
    loginOutFn() {
      localStorage.removeItem("token");
      this.changeIsLogined(false);
    },
    // 路由方法
    homeFn(){
      this.$router.push('/')
    },
    DesFn(){
      this.$router.push('/destination')
    },
    strategyFn(){
      this.$router.push('/strategy')
    },
  },
};
</script>
 
<style lang = "less" scoped>
</style>